<template>
	<view class="best-modal" :class="{'best-modal-active':_show}">
		<!-- <view class="best-modal-layer" @click="cancel"></view> -->
		<view class="box_header">
			<slot></slot>
		</view>
		<view class="password-item" @click="getKeyboard">
			<view class="password-item-char" v-for="(item,index) in _digits" :key="index" :class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
		</view>
		
		<view class="digital-keyboard">
			<view class="form-edit">
				<view class="num" v-for="item in digitalList" :key="item" :class="{'no-num':item === '-1'}"
				 @click="getKeyNumber(item)">{{item}}</view>
			</view>
			<view class="sure-btns" @tap="confirm"></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:'uni-password',
		data() {
			return {
				activeInput: 0,
				digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-1'],
				paymentPwd: ''
			};
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: ''
			},
			digits: {
				type: [Number, String],
				default: 6
			}
		},
		computed: {
			payPassWord() {
				var payPassWord = this.paymentPwd.split('') || [];
				payPassWord.fill('●');
				return payPassWord;
			},
			_show() {
				this.initData();
				return String(this.show) === 'false' ? false : true;
			},
			_digits() {
				let digits = [];
				digits.length = this.digits;
				return digits;
			}
		},
		methods: {
			initData: function() {
				this.paymentPwd = this.value;
				this.activeInput = this.value.length;
			},
			cancel: function() {
				this.$emit('cancel');
			},
			confirm: function(){
				if(this.activeInput == this.digits){
					this.$emit('confirm', this.paymentPwd);
				}
			},
			getKeyNumber: function(val) {
				if (val === '' || (val != -1 && this.activeInput == this.digits)) { //空或者已经达到最大值
					return false;
				} else if (val != -1) { //数字输入
					this.activeInput++
					this.paymentPwd += val;
					if (this.activeInput == this.digits) { //验证密码正确性
						return this.paymentPwd;
					}
				} else { //删除
					if (this.activeInput != 0) {
						this.activeInput--;
						this.paymentPwd = this.paymentPwd.substr(0, this.activeInput)
					}
				}
			},
			getKeyboard: function(e) {
				var index = e.target.dataset.index;
				if (index === undefined) return false;
				var _length = this.paymentPwd.length
				this.activeInput = index <= _length ? index : _length;
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	
	/* 显示/隐藏 */
	.best-modal.best-modal-active {
		display: block;
	}
	/* 关闭遮罩层 */
	.best-modal-layer {
		background-color: rgba(0, 0, 0, 0.2);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
	.box_header{
		font-size: 32rpx;
		line-height: 170rpx;
		margin-bottom: 60rpx;
	}
	.password-item {
		height: 100%;
		border: 1px solid #d71611;
		border-radius: 15upx;
		width: 540upx;
		margin: 0 auto;
		box-shadow: 0 0 3px rgba(215,22,17, .6);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		&-char {
			width: 16.66666666%;
			height: 90upx;
			border-right: 1px solid #ddd;
			line-height: 90upx;
			text-align: center;
			&:last-child {
				border-right: none;
			}
		}
	}


	/* 键盘 */
	.digital-keyboard{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		view{
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.form-edit{
			width: 600rpx;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			.num {
				-webkit-transition: all .2s linear;
				-o-transition: all .2s linear;
				transition: all .2s linear;
				background-color: #fff;
				width: 200rpx;
				cursor: pointer;
				border: 1px solid #eee;
				height: 120rpx;
				text-align: center;
				color: #333;
				line-height: 120rpx;
				font-size: 55rpx;
				font-weight: bold;
				&:nth-of-type(3n) {
					border-bottom: 0;
				}
				&:nth-of-type(3n+1) {
					border-bottom: 0;
					border-left: 0;
				}
				&:nth-of-type(3n+2) {
					border-bottom: 0;
					border-left: 0;
					border-right: 0;
				}
				&.no-num {
					font-size: 0;
					background-image:url('~@/static/icons/ydt/left.png');
					border-right: 1px solid #eee;
					width: 400rpx;
					background-repeat: no-repeat;
					background-size: 64rpx 64rpx;
					background-position: center center;
				}
			}
		}
		.sure-btns{
			width: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1px solid #eee;
			background-image:url('~@/static/icons/ydt/sure.png');
			background-repeat: no-repeat;
			background-size: 64rpx 64rpx;
			background-position: center center;
		}
	}

</style>
